var app = new Vue({
  el: '#root',
	data: {
    screen: document.body.clientWidth,
		nav: {
			show: false,
      submenu: 0
		},
		search: {
			show: false,
			value: ''
		},
    submenu: {
      showClass: false
    },
    leadership: 1,
    currentScrollTop: 0,
    fixedPin: false,
    fixedWidth: 0,
    showContainer: false
	},
  mounted: function() {
    var that = this;
    var anchorMenu = document.getElementById('anchorMenu');
    if (anchorMenu) {
      this.fixedWidth = anchorMenu.clientWidth;
    }
    window.onresize = function() {
      that.screen = document.body.clientWidth;
      if (that.screen >= 992) {
        that.nav.submenu = 0;
        that.nav.show = false;
        that.search.show = false;
      } else {
        that.fixedPin = false;
      }
      if (anchorMenu) {
        that.fixedWidth = anchorMenu.clientWidth;
      }
    };
    window.addEventListener('scroll', function(){
      if (anchorMenu) {
        that.fixedWidth = anchorMenu.clientWidth;
      }
      that.currentScrollTop = document.documentElement.scrollTop;
      if (anchorMenu && that.screen >= 992) {
        var anchorMenuTop = that.getTop(anchorMenu);
        if (that.currentScrollTop >= anchorMenuTop) {
          that.fixedPin = true;
        } else {
          that.fixedPin = false;
        }
      } else {
        that.fixedPin = false;
      }
    });
  },
  updated: function() {
    if (this.nav.show) {
      document.getElementsByTagName('html')[0].className = 'no-scroll';
    } else {
      document.getElementsByTagName('html')[0].className = '';
    }
  },
	directives: {
		focus: {
			update: function (el, _ref) {
        var value = _ref.value;
				if (value) {
					el.focus();
				}
			}
		}
	},
	methods: {
		showNav: function() {
      if (this.screen < 992) {
        this.nav.show = !this.nav.show;
      }
		},
    switchContainer: function() {
      this.showContainer = !this.showContainer;
      this.fixedPin = false;
    },
		showSearch: function() {
			if (this.screen >= 992) {
				return;
			}
			this.search.show = !this.search.show;
			if (!this.search.show) {
				this.search.value = '';
			}
		},
    submenuShowClass: function() {
      this.submenu.showClass = !this.submenu.showClass;
    },
    submenuShowEvent: function(index) {
      if (this.screen < 992) {
        if (index === this.nav.submenu) {
          this.nav.submenu = 0;
        } else {
          this.nav.submenu = index;
        }
      }
    },
    leadershipTabs: function(index) {
      this.leadership = index;
      this.submenu.showClass = false;
    },
    goAnchor: function(e) {
      e.preventDefault();
      if (e.target.hash != '') {
        var hash = e.target.hash.substring(1);
        var hashTarget = document.getElementById(hash);
        var top = this.getTop(hashTarget);
        console.log(top);
        this.animateScroll(top, 30);
      }
    },
    getTop: function (e) {
      var top = e.offsetTop;
      while (e = e.offsetParent) {
        top += e.offsetTop;
      }
      return top;
    },
    animateScroll: function(top, speed) {
      var currentTop = this.currentScrollTop;
      var requestId;
      function step(timestamp) {
        if (currentTop < top) {
          currentTop += speed;
          if (currentTop < top) {
            window.scrollTo(0, currentTop);
            requestId = window.requestAnimationFrame(step);
          } else {
            window.cancelAnimationFrame(requestId);
          }
        } else if (currentTop > top) {
          currentTop -= speed;
          if (currentTop > top) {
            window.scrollTo(0, currentTop);
            requestId = window.requestAnimationFrame(step);
          } else {
            window.cancelAnimationFrame(requestId);
          }
        }
      }
      window.requestAnimationFrame(step);
    }
	}
});
